<template>
    <div ref="chartDom" :style="{ width: '100%', height: '400px' }"></div>
  </template>
  
  <script setup>
  import * as echarts from 'echarts'
  import { onMounted, ref, watch } from 'vue'
  
  // 接收传入的年份
  const props = defineProps({
    year: {
      type: Number,
      required: true
    }
  })
  
  const chartDom = ref()
  let chart
  
  const initChart = (filteredDataIn, filteredDataOut) => {
    chart = echarts.init(chartDom.value)
    chart.setOption({
        title: {
            text: `月度流失与新增客户数量统计 - ${props.year}年`,
            left: 'center'
        },
        tooltip: {
            show: true,
            trigger: 'axis',
            axisPointer: {
            type: 'shadow'
            },
        },
        legend: {
            left: 'left'
        },
        xAxis: {
            name: '人数',
            type: 'value',
        },
        yAxis: {
            name: '月份',
            type: 'category',
            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'], 
            axisLabel: {
            interval: 0,
            }
        },
        toolbox: {
                show: true,
                feature: {
                    restore: { show: true },
                    saveAsImage: { show: true }
                }
        },
        series: [
            {
                name: '新增',
                type: 'bar',
                stack: '总量',
                label: {
                    show: true,
                },
                emphasis: {
                    focus: 'series'
                },
                data: filteredDataIn.monthlyCounts, // 过滤后的数据
                itemStyle: {
                    color: '#28A1FFB3'
                }
            },
            {
                name: '流失',
                type: 'bar',
                stack: '总量',
                label: {
                    show: true,
                },
                emphasis: {
                    focus: 'series'
                },
                data: filteredDataOut.monthlyCounts, // 过滤后的数据
                itemStyle: {
                    color: '#9a9a9a'
                }
            }
        ]
    })
  }
  
  // 过滤新增人数
  const filterDataByYearIn = (year) => {
    // 模拟过滤后的数据（根据实际需求，你可以从 API 获取数据）
    const allData = {
        2024: {
            monthlyCounts: [34, 56, 89, 72, 90, 67, 45, 78, 12, 65, 54, 87],
        },
        2023: {
            monthlyCounts: [23, 88, 45, 67, 92, 56, 34, 73, 18, 50, 63, 71],
        },
        2022: {
            monthlyCounts: [12, 41, 57, 69, 80, 93, 76, 54, 28, 33, 60, 84],
        },
        2021: {
            monthlyCounts: [25, 60, 47, 52, 87, 32, 69, 40, 90, 55, 64, 79],
        },
        2020: {
            monthlyCounts: [77, 48, 23, 62, 89, 35, 51, 82, 29, 40, 68, 71]
        }
    };
  
    return allData[year] || { monthlyCounts: []}
  }
  
  // 过滤流失人数
  const filterDataByYearOut = (year) => {
    // 模拟过滤后的数据（根据实际需求，你可以从 API 获取数据）
    const allData = {
        2024: {
            monthlyCounts: [-12, -28, -45, -52, -63, -34, -18, -59, -70, -47, -25, -60],
        },
        2023: {
            monthlyCounts: [-65, -50, -72, -38, -60, -55, -23, -69, -31, -40, -47, -62],
        },
        2022: {
            monthlyCounts: [-28, -41, -56, -64, -37, -49, -72, -33, -66, -20, -55, -48],
        },
        2021: {
            monthlyCounts: [-67, -42, -29, -70, -53, -61, -30, -68, -38, -24, -57, -45],
        },
        2020: {
            monthlyCounts: [-62, -58, -45, -39, -72, -25, -67, -31, -50, -60, -20, -28]
        }
    };
  
    return allData[year] || { monthlyCounts: []}
  }

  watch(() => props.year, (newYear) => {
    const filteredDataIn = filterDataByYearIn(newYear)
    const filteredDataOut = filterDataByYearOut(newYear)
    initChart(filteredDataIn, filteredDataOut)
  })
  
  onMounted(() => {
    const filteredDataIn = filterDataByYearIn(props.year)
    const filteredDataOut = filterDataByYearOut(props.year)
    initChart(filteredDataIn, filteredDataOut)
  })
  </script>
  
  <style scoped>
  /* Add any specific styles here */
  </style>
  